<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>浮动布局 | 静思田园</title>
    <meta name="description" content="时不时记录一点点">
    <meta name="generator" content="VitePress v1.5.0">
    <link rel="preload stylesheet" href="/assets/style.D1KHeDuB.css" as="style">
    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
    <script type="module" src="/assets/chunks/metadata.d4b76d32.js"></script>
    <script type="module" src="/assets/app.Cqoht_Of.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.trnLO_3_.js">
    <link rel="modulepreload" href="/assets/chunks/theme.BNMYWj-o.js">
    <link rel="modulepreload" href="/assets/chunks/katex.BZy9Y_85.js">
    <link rel="modulepreload" href="/assets/chunks/c4Diagram-3d4e48cf.rhyfUO3k.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-66a62f08.BvVfKYLl.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-v2-96b9c2cf.rYAPEXyw.js">
    <link rel="modulepreload" href="/assets/chunks/erDiagram-9861fffd.CQSbaoJM.js">
    <link rel="modulepreload" href="/assets/chunks/gitGraphDiagram-72cf32ee.CjLmC8RV.js">
    <link rel="modulepreload" href="/assets/chunks/ganttDiagram-c361ad54.R_V-FeK5.js">
    <link rel="modulepreload" href="/assets/chunks/infoDiagram-f8f76790.C-2Va9KZ.js">
    <link rel="modulepreload" href="/assets/chunks/pieDiagram-8a3498a8.B9ZVkD7K.js">
    <link rel="modulepreload" href="/assets/chunks/quadrantDiagram-120e2f19.BuonnDHi.js">
    <link rel="modulepreload" href="/assets/chunks/xychartDiagram-e933f94c.C_bIYaUn.js">
    <link rel="modulepreload" href="/assets/chunks/requirementDiagram-deff3bca.RFVzvdjl.js">
    <link rel="modulepreload" href="/assets/chunks/sequenceDiagram-704730f1.UZWxMlyq.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-70f12bd4.sipmPMFa.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-v2-f2320105.CDkLxQ0T.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-587899a1.CD2ocVZB.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-v2-d93cdb3a.D0qUPm3J.js">
    <link rel="modulepreload" href="/assets/chunks/journeyDiagram-49397b02.CeUUZA2l.js">
    <link rel="modulepreload" href="/assets/chunks/flowchart-elk-definition-4a651766.DkdgpMTf.js">
    <link rel="modulepreload" href="/assets/chunks/timeline-definition-85554ec2.WL9yxus9.js">
    <link rel="modulepreload" href="/assets/chunks/mindmap-definition-fc14e90a.CWC2bxmB.js">
    <link rel="modulepreload" href="/assets/chunks/sankeyDiagram-04a897e0.BXj8OViR.js">
    <link rel="modulepreload" href="/assets/chunks/blockDiagram-38ab4fdb.CPVnJXk5.js">
    <link rel="modulepreload" href="/assets/chunks/virtual_mermaid-config.DDnGl6nM.js">
    <link rel="modulepreload" href="/assets/frontend_css_浮动布局.md.DfMsYBt6.lean.js">
    <meta name="application-name" content="VuePress">
    <meta name="apple-mobile-web-app-title" content="静思田园">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#3eaf7c">
    <meta name="theme-color" content="#646cff">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>静思田园</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57></span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/network/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>网络工程师</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/frontend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/English/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Scrupy/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>爬虫</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/backend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>后端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bigdata/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>大数据</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/computer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>计算机基础</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/database/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>数据库</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docker/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>dorker</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Git</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/nodejs/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Node.js</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/python/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Python</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/shell/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>shell</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tools/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>工具</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>CSS</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>CSS</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/css%E5%9F%BA%E7%A1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>基础知识</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%8F%98%E5%BD%A2%E5%8A%A8%E7%94%BB.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>变形动画</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%93%8D%E5%BA%94%E5%BC%8F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>响应式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>媒体查询</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%AE%9A%E4%BD%8D%E5%B8%83%E5%B1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>定位布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%B8%A7%E5%8A%A8%E7%94%BB.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>帧动画</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>弹性布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%95%B0%E6%8D%AE%E6%A0%B7%E5%BC%8F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>数据样式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%96%87%E6%9C%AC.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>文本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%A0%85%E6%A0%BC%E7%B3%BB%E7%BB%9F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>栅格系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>浮动布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>盒子模型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E8%83%8C%E6%99%AF.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>背景</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E9%80%89%E6%8B%A9%E5%99%A8.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>选择器</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _frontend_css_%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80" data-v-39a288b8><div><h1 id="浮动布局" tabindex="-1">浮动布局 <a class="header-anchor" href="#浮动布局" aria-label="Permalink to &quot;浮动布局&quot;">​</a></h1><h3 id="float" tabindex="-1">float <a class="header-anchor" href="#float" aria-label="Permalink to &quot;float&quot;">​</a></h3><p>使用浮动可以控制相邻元素间的排列关系。</p><table tabindex="0"><thead><tr><th style="text-align:left;">选项</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">left</td><td style="text-align:left;">向左浮动</td></tr><tr><td style="text-align:left;">right</td><td style="text-align:left;">向右浮动</td></tr><tr><td style="text-align:left;">none</td><td style="text-align:left;">不浮动</td></tr></tbody></table><p>浮动特性：</p><ol><li><p>没有设置浮动的块元素是独占一行的。</p></li><li><p>浮动是对后边元素的影响，不会影响前边的元素，浮动的元素不占用空间位。</p></li><li><p>任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素，因此可以设置宽高。</p></li><li><p>多个元素都设置浮动后，会并排显示，总宽超出父元素宽才回换行。</p></li><li><p>清除元素浮动，需最后一个清除浮动的元素或者伪类元素被设置为块元素。</p></li><li><p>浮动元素边界不能超过父元素的 padding。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#E06C75;">    main</span><span style="color:#D19A66;">.love-show-float-padding</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">        width: </span><span style="color:#D19A66;">400</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        border: </span><span style="color:#D19A66;">solid</span><span style="color:#D19A66;"> 2</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> black</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        overflow: </span><span style="color:#D19A66;">auto</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        padding: </span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        background-color: antiquewhite;</span></span>
<span class="line"><span style="color:#ABB2BF;">        background-clip: </span><span style="color:#D19A66;">content-box</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        div {</span></span>
<span class="line"><span style="color:#ABB2BF;">            width: </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            height: </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            box-sizing: </span><span style="color:#D19A66;">border-box</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        }</span></span>
<span class="line"><span style="color:#E06C75;">        div</span><span style="color:#56B6C2;">:first-of-type</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">            float: </span><span style="color:#D19A66;">left</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            border: </span><span style="color:#D19A66;">solid</span><span style="color:#D19A66;"> 2</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> red</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        }</span></span>
<span class="line"><span style="color:#E06C75;">            div</span><span style="color:#56B6C2;">:last-of-type</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">            float: </span><span style="color:#D19A66;">right</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            background: </span><span style="color:#D19A66;">green</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        }</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt; </span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">main</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;love-show-float-padding&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">main</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></li></ol><main class="love-show-float-padding"><div></div><div></div></main><h2 id="清除浮动" tabindex="-1">清除浮动 <a class="header-anchor" href="#清除浮动" aria-label="Permalink to &quot;清除浮动&quot;">​</a></h2><h3 id="clear" tabindex="-1">clear <a class="header-anchor" href="#clear" aria-label="Permalink to &quot;clear&quot;">​</a></h3><ol><li>CSS 提供了 <code>clear</code> 规则用于清除元素浮动影响。</li></ol><table tabindex="0"><thead><tr><th style="text-align:left;">选项</th><th style="text-align:left;">说明</th></tr></thead><tbody><tr><td style="text-align:left;">left</td><td style="text-align:left;">左边远离浮动元素</td></tr><tr><td style="text-align:left;">right</td><td style="text-align:left;">右连远离浮动元素</td></tr><tr><td style="text-align:left;">both</td><td style="text-align:left;">左右都远离浮动元素</td></tr></tbody></table><p>清除两边浮动：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#E06C75;">    div</span><span style="color:#D19A66;">.love-clear-float-model</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">        width: </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        height: </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        margin-bottom: </span><span style="color:#D19A66;">10</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">         &amp;.green {</span></span>
<span class="line"><span style="color:#ABB2BF;">            border: </span><span style="color:#D19A66;">solid</span><span style="color:#D19A66;"> 2</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> green</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            float: </span><span style="color:#D19A66;">left</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        }</span></span>
<span class="line"><span style="color:#ABB2BF;">        &amp;</span><span style="color:#D19A66;">.red</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">            border: </span><span style="color:#D19A66;">solid</span><span style="color:#D19A66;"> 2</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> red</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            float: </span><span style="color:#D19A66;">right</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        }</span></span>
<span class="line"><span style="color:#ABB2BF;">        &amp;</span><span style="color:#D19A66;">.blue</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">            background: </span><span style="color:#D19A66;">blue</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">            clear: </span><span style="color:#D19A66;">both</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        }</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;love-clear-float-model green&quot;</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;love-clear-float-model red&quot;</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;love-clear-float-model blue&quot;</span><span style="color:#ABB2BF;">&gt;&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><div class="love-clear-float-model green"></div><div class="love-clear-float-model red"></div><div class="love-clear-float-model blue"></div><ol start="2"><li><p>在父元素内部最后面添加一个没有高度的了元素，并使用<code>clear:both</code> 。</p></li><li><p>使用 <code>::after</code> 伪类为父元素添加后标签，实现清除浮动影响，需要有<code>content</code>，并且变为块元素。</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#D19A66;">.clearfix</span><span style="color:#56B6C2;">::after</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">    content: </span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">    display: </span><span style="color:#D19A66;">block</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">    clear: </span><span style="color:#D19A66;">both</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li><li><p>子元素使用浮动后将不占用空间，这时父元素高度为将为零。通过添加父元素并设置 <code>overflow</code> 属性可以清除浮动。</p><p>将会使用父元素产生 <code>BFC</code> 机制，即父元素的高度计算会包括浮动元素的高度。</p></li></ol><div class="tip custom-block"><p class="custom-block-title">BFC机制</p><p><strong>BFC（Block Formatting Context）是CSS中的一种渲染机制，它是一个独立的渲染区域，规定了内部元素如何布局，并且盒子内部元素与外部元素互不影响</strong>‌。</p><h5 id="bfc的触发条件" tabindex="-1">BFC的触发条件 <a class="header-anchor" href="#bfc的触发条件" aria-label="Permalink to &quot;BFC的触发条件&quot;">​</a></h5><ul><li>根元素（html）</li><li>浮动元素：<code>float</code>除<code>none</code>以外的值</li><li>绝对定位元素：<code>position</code>（<code>absolute</code>、<code>fixed</code>）</li><li><code>display</code>为<code>inline-block</code>、<code>table-cells</code>、<code>flex</code></li><li><code>overflow</code>除<code>visible</code>以外的值（<code>hidden</code>、<code>auto</code>、<code>scroll</code>）</li></ul><h5 id="应用场景包括" tabindex="-1">应用场景包括： <a class="header-anchor" href="#应用场景包括" aria-label="Permalink to &quot;应用场景包括：&quot;">​</a></h5><ul><li>解决外边距折叠问题</li><li>包含浮动元素</li><li>防止元素被浮动元素覆盖</li></ul></div><h2 id="形状浮动" tabindex="-1">形状浮动 <a class="header-anchor" href="#形状浮动" aria-label="Permalink to &quot;形状浮动&quot;">​</a></h2><p>通过形状浮动可以让内容围绕图片，类似于我们在 word 中的环绕排版。要求图片是有透明度的 <code>PNG</code> 格式。</p><h3 id="显示区域" tabindex="-1">显示区域 <a class="header-anchor" href="#显示区域" aria-label="Permalink to &quot;显示区域&quot;">​</a></h3><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path" target="_blank" rel="noreferrer">clip-path</a>使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。</p><table tabindex="0"><thead><tr><th>选项</th><th>说明</th></tr></thead><tbody><tr><td>circle</td><td>圆形</td></tr><tr><td>ellipse</td><td>椭圆</td></tr><tr><td>polygon</td><td>多边形</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#E06C75;">      span</span><span style="color:#D19A66;">.love-float-shape-clip</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">          float: </span><span style="color:#D19A66;">left</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          width: </span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          height: </span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          padding: </span><span style="color:#D19A66;">10</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          margin: </span><span style="color:#D19A66;">10</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          border: </span><span style="color:#D19A66;">solid</span><span style="color:#D19A66;"> 30</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> green</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          shape-outside: </span><span style="color:#D19A66;">margin-box</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">          clip-path: </span><span style="color:#56B6C2;">circle</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">%</span><span style="color:#ABB2BF;"> at </span><span style="color:#D19A66;">center</span><span style="color:#ABB2BF;">);</span><span style="color:#7F848E;font-style:italic;">/*circle*/</span></span>
<span class="line"><span style="color:#ABB2BF;">          clip-path: </span><span style="color:#56B6C2;">ellipse</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">%</span><span style="color:#D19A66;"> 80</span><span style="color:#E06C75;">%</span><span style="color:#ABB2BF;"> at </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">%</span><span style="color:#D19A66;"> 0</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">          clip-path: </span><span style="color:#56B6C2;">polygon</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">%</span><span style="color:#D19A66;"> 0</span><span style="color:#ABB2BF;">, </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">%</span><span style="color:#D19A66;"> 100</span><span style="color:#E06C75;">%</span><span style="color:#ABB2BF;">, </span><span style="color:#D19A66;">0</span><span style="color:#D19A66;"> 100</span><span style="color:#E06C75;">%</span><span style="color:#ABB2BF;">)</span></span>
<span class="line"><span style="color:#ABB2BF;">      }</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;width: 500px;&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      &lt;</span><span style="color:#E06C75;">span</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;love-float-shape-clip&quot;</span><span style="color:#ABB2BF;">&gt; &lt;/</span><span style="color:#E06C75;">span</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">      Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for</span></span>
<span class="line"><span style="color:#ABB2BF;">      Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses,</span></span>
<span class="line"><span style="color:#ABB2BF;">      would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace</span></span>
<span class="line"><span style="color:#ABB2BF;">      and security. It would be a further breach of international law, including the most fundamental principles of</span></span>
<span class="line"><span style="color:#ABB2BF;">      the UN Charter.</span></span>
<span class="line"><span style="color:#ABB2BF;">  &lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div> <div style="width:500px;"><span class="love-float-shape-clip"></span> Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses, would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace and security. It would be a further breach of international law, including the most fundamental principles of the UN Charter. </div><h3 id="环绕模式" tabindex="-1">环绕模式 <a class="header-anchor" href="#环绕模式" aria-label="Permalink to &quot;环绕模式&quot;">​</a></h3><h4 id="距离控制" tabindex="-1">距离控制 <a class="header-anchor" href="#距离控制" aria-label="Permalink to &quot;距离控制&quot;">​</a></h4><p>通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside" target="_blank" rel="noreferrer">shape-outside</a>控制环绕模式。实际是通过定义元素实际环绕区域，文字沿环绕区域外围进行环绕。</p><table tabindex="0"><thead><tr><th>选项</th><th>说明</th></tr></thead><tbody><tr><td>margin-box</td><td>外边距环绕</td></tr><tr><td>padding-box</td><td>内边距环绕</td></tr><tr><td>border-box</td><td>边线环绕</td></tr><tr><td>content-box</td><td>内容环绕</td></tr><tr><td>circle</td><td>圆形环绕</td></tr><tr><td>ellipse</td><td>椭圆环绕</td></tr><tr><td>url</td><td>图片环绕，需是有透明度的png图片，JPG图片不可以。</td></tr><tr><td>polygan</td><td>多边环绕</td></tr></tbody></table><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#E06C75;">    img</span><span style="color:#D19A66;">.love-float-shape-clip-img</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">        padding: </span><span style="color:#D19A66;">20</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        float: </span><span style="color:#D19A66;">left</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        border-radius: </span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">%</span><span style="color:#C678DD;"> !important</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        shape-outside: </span><span style="color:#56B6C2;">url</span><span style="color:#ABB2BF;">(</span><span style="color:#E06C75;font-style:italic;">model.png</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">        shape-outside: </span><span style="color:#56B6C2;">polygon</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> 0</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">, </span><span style="color:#D19A66;">0</span><span style="color:#D19A66;"> 100</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">, </span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> 100</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">        shape-outside: </span><span style="color:#56B6C2;">ellipse</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">80</span><span style="color:#E06C75;">px</span><span style="color:#D19A66;"> 40</span><span style="color:#E06C75;">px</span><span style="color:#ABB2BF;">) </span><span style="color:#D19A66;">padding-box</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">        shape-outside: </span><span style="color:#56B6C2;">circle</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">50</span><span style="color:#E06C75;">%</span><span style="color:#ABB2BF;">) </span><span style="color:#D19A66;">padding-box</span><span style="color:#ABB2BF;">;</span></span>
<span class="line"><span style="color:#ABB2BF;">    }</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">div</span><span style="color:#D19A66;"> style</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;width: 500px;&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    &lt;</span><span style="color:#E06C75;">img</span><span style="color:#D19A66;"> src</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;https://plus.unsplash.com/premium_photo-1676299910876-747eeb0c11dc?w=800&amp;auto=format&amp;fit=crop&amp;q=60&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c3F1YXJlfGVufDB8fDB8fHww&quot;</span></span>
<span class="line"><span style="color:#D19A66;">        alt</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;&quot;</span><span style="color:#D19A66;"> width</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;100px&quot;</span><span style="color:#D19A66;"> class</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">&quot;love-float-shape-clip-img&quot;</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#ABB2BF;">    Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for</span></span>
<span class="line"><span style="color:#ABB2BF;">    Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses,</span></span>
<span class="line"><span style="color:#ABB2BF;">    would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace</span></span>
<span class="line"><span style="color:#ABB2BF;">    and security. It would be a further breach of international law, including the most fundamental principles of</span></span>
<span class="line"><span style="color:#ABB2BF;">    the UN Charter.</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">div</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><div style="width:500px;"><img src="https://plus.unsplash.com/premium_photo-1676299910876-747eeb0c11dc?w=800&amp;auto=format&amp;fit=crop&amp;q=60&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c3F1YXJlfGVufDB8fDB8fHww" alt="" width="100px" class="love-float-shape-clip-img"> Several thousands of DPRK troops have been deployed to Russia. The DPRK’s direct support for Russia’s war of aggression against Ukraine, besides showing Russia’s desperate efforts to compensate its losses, would mark a dangerous expansion of the conflict, with serious consequences for European and Indo-Pacific peace and security. It would be a further breach of international law, including the most fundamental principles of the UN Charter. </div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新: <time datetime="2024-12-30T14:20:32.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/frontend/css/%E6%A0%85%E6%A0%BC%E7%B3%BB%E7%BB%9F.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>上一篇</span><span class="title" data-v-e257564d>栅格系统</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/frontend/css/%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>下一篇</span><span class="title" data-v-e257564d>盒子模型</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    
    
  </body>
</html>